<template>
  <div class="page flex-col">
    <div class="box_1 flex-row justify-between">
      <div class="group_3 flex-col">
        <div class="text-wrapper_3 flex-row"><span class="text_21">电气设备</span></div>
        <div class="block_18 flex-row">
          <el-input v-model="input" placeholder="设备名称/安装位置关键字搜索"
                    style="
            height: 32px;
            width: 241px;
            float: left;"
          ></el-input>
          <el-button type="primary"
                     class="text-wrapper_5">查询</el-button>
          <span class="text_24">设备状态：</span>
          <el-select v-model="ConValue" placeholder="请选择"
                     style="background-color: rgba(255, 255, 255, 1);
                width: 241px;
                height: 32px;
                float:left;
                ">
            <el-option
                v-for="item in ConOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
          <div style="float: right;">
            <el-button class="text-wrapper_6 flex-col">批量导入</el-button>
            <el-button class="text-wrapper_6 flex-col">批量导出</el-button>
            <el-button class="text-wrapper_6 flex-col" @click="dialogFormVisible = true">添加设备</el-button>
            <el-button class="text-wrapper_6 flex-col">导入模版</el-button>
          </div>
        </div>
      </div>
      <div class="group_4 flex-col">
        <div class="box_7 flex-row justify-between">
          <div class="box_7_1 flex-row justify-between">
            <el-dialog title="电气设备信息" :visible.sync="dialogFormVisible" width="748px" height="650px" append-to-body style="border-radius:10px">
              <el-form ref="form" :model="form" :rules="rules" label-width="150px">
                <div style="padding-top: 20px;">
                </div>
                <el-form-item class="efi" label="安装位置：" prop="Address">
                  <el-input v-model="form.Address"/>
                </el-form-item>
                <el-form-item class="efi" label="技术参数：" prop="TechData" style="float:left;width: 708px;">
                  <el-input v-model="form.TechData"/>
                </el-form-item>                      <el-form-item class="efi" label="安装位置：" prop="Address" style="float:left;width: 708px;">
                <el-input v-model="form.Address"/>
              </el-form-item>
                <el-form-item class="efi" label="技术参数：" prop="TechData" style="float:left;width: 708px;">
                  <el-input v-model="form.TechData"/>
                </el-form-item>
                <div>
                  <el-form-item class="efi" label="数据获取时间：" prop="FacDate">
                    <dialogFormVisible v-model="value1" class="block">
                      <el-date-picker
                          v-model="value1"
                          type="date"
                          placeholder="请选择出厂日期">
                      </el-date-picker>
                    </dialogFormVisible>
                  </el-form-item>
                </div>
                <el-form-item class="efi" label="安装位置：" prop="Address" style="float:left;width: 708px;">
                  <el-input v-model="form.Address"/>
                </el-form-item>
                <el-form-item class="efi" label="技术参数：" prop="TechData" style="float:left;width: 708px;">
                  <el-input v-model="form.TechData"/>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer" >
                <el-button type="primary" @click="submitForm " size="small" style="width: 56px;border-radius: 2px;background: linear-gradient(136deg, #01A29D 0%, #1D75C3 100%);">确定</el-button>
                <el-button @click="cancel1" size="small" style="width: 56px;border-radius: 2px;border: 1px solid #C5C3CB;">取 消</el-button>
              </div>
            </el-dialog>
          </div>
        </div>
        <div class="box_8 flex-col">
          <el-table
              ref="multipleTable"
              :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
              :header-cell-style="getRowClass"
              tooltip-effect="dark"
              style="width: 100%;
              font-family: PingFangSC-Medium;
              font-size: 14px;
              font-weight: 500;
              text-align: left;
              white-space: nowrap;
              line-height: 20px;"
              @selection-change="handleSelectionChange">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                label="设备详情"
                width="120">
              <template slot-scope="scope">
                <el-button
                    @click="dialogCardVisible = true"
                    type="text"
                    class="text_48">
                  查看详情
                </el-button>
              </template>
            </el-table-column>
            <el-table-column
                label="设备编号"
                prop="DeNum"
                width="120">
            </el-table-column>
            <el-table-column
                label="动态参数"
                prop="DynPara"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                label="数据获取时间"
                prop="CatchDate"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                label="数据状态"
                prop="DataState"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                label="巡检编号"
                prop="InsNumber"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                label="操作"
                prop="operate"
                show-overflow-tooltip>
              <template slot-scope="scope">
                <el-button
                    type="text"
                    @click="handleEdit(scope.$index, scope.row)"
                    class="text_48">
                  修改
                </el-button>
                <el-button
                    slot="reference"
                    type="text"
                    @click.native.prevent="deleteRow(scope.$index, tableData)"
                    class="text_49">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-dialog title="电气设备运行信息" :visible.sync="dialogCardVisible" width="500px" height="620px" append-to-body
                     style="border-radius:10px;
                  color: rgba(43, 46, 62, 1);
                  font-size: 14px;
                  font-family: PingFangSC-Medium;
                  font-weight: 500;">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
              <div style="padding-top: 20px;display: block;float: left;width: 700px;"></div>
              <div style="display: block;float: left;width: 700px;">
                <el-form-item label="设备编号：" prop="DeName" style="margin-bottom: 10px;">
                  <span class="text_61">设备编号设备编号设备编号设备编号</span>
                </el-form-item>
              </div>
              <div style="display: block;float: left;width: 700px;">
                <el-form-item label="动态参数：" prop="DeName" >
                  <span class="text_61">动态参数动态参数动态参数动态参数</span>
                </el-form-item>
              </div>
              <div style="display: block;float: left;width: 700px;">
                <el-form-item label="数据获取时间：" prop="DeName" >
                  <span class="text_61">数据获取时间数据获取时间数据获取时间</span>
                </el-form-item>
              </div>
              <div style="display: block;float: left;width: 700px;">
                <el-form-item label="数据状态：" prop="DeName">
                  <span class="text_61">数据状态数据状态数据状态数据状态</span>
                </el-form-item>
              </div>
              <div style="display: block;float: left;width: 700px;">
                <el-form-item label="巡检编号：" prop="DeName">
                  <span class="text_61">巡检编号巡检编号巡检编号巡检编号</span>
                </el-form-item>
              </div>
              <div style="display: block;float: left;width: 700px;">
                <el-form-item label="修改用户：" prop="DeName">
                  <span class="text_61">修改用户修改用户修改用户修改用户</span>
                </el-form-item>
              </div>
              <div style="display: block;float: left;width: 700px;">
                <el-form-item label="修改时间：" prop="DeName">
                  <span class="text_61">修改时间修改时间</span>
                </el-form-item>
              </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="cancel2" size="small">我知道了</el-button>
            </div>
          </el-dialog>

        </div>
        <div class="box_14 flex-row">
          <div class="image-text_4 flex-row justify-between">
            <template>
              <el-pagination align='center'
                             background
                             @size-change="handleSizeChange"
                             @current-change="handleCurrentChange"
                             :current-page="currentPage"
                             :page-sizes="[1,5,10,20]"
                             :page-size="pageSize"
                             layout="total, sizes, prev, pager, next, jumper"
                             :total="tableData.length">
              </el-pagination>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  name:'EquipmentOperation',
  data() {
    return {
      ConOptions: [{
        value: '选项1',
        label: '状态1'
      }, {
        value: '选项2',
        label: '状态2'
      }, {
        value: '选项3',
        label: '状态3'
      }],
      ConValue:"",
      tableData: [{
        DeNum:"1",
        DynPara:"1",
        CatchDate:"2024-1-10",
        DataState:"1",
        InsNumber:"1"
      },{
        DeNum:"2",
        DynPara:"1",
        CatchDate:"2024-1-10",
        DataState:"1",
        InsNumber:"1"
      },{
        DeNum:"3",
        DynPara:"1",
        CatchDate:"2024-1-10",
        DataState:"1",
        InsNumber:"1"
      },{
        DeNum:"4",
        DynPara:"1",
        CatchDate:"2024-1-10",
        DataState:"1",
        InsNumber:"1"
      }],
      multipleSelection: [],
      checked:'',
      value: '',
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogCardVisible:false,
      DeVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      value1: '',
      value2: '',
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 10, // 每页的数据条数
      // 添加设备-表单数据内容
      formData: {
        DeName: '',
        Encode: '',
        DeModel:'',
        Manufacturer:'',
        FacNum:'',
        FacDate:'',
        DeType:'',
        OpDate:'',
        Room:'',
        Dpt:'',
        Major:'',
        Manager:'',
        Address:'',
        TechData:'',
      }
    }
  },
  methods:{
    getRowClass({ row, column, rowIndex, columnIndex,}) {
      return "background:#E7F8F8;border:none;color: rgba(43, 46, 62, 1);";
    },
    deleteRow(index, rows){
      this.$confirm('此操作将删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        rows.splice(index, 1);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleEdit(index, row){
      this.dialogFormVisible = true;
    },
    cancel1(){
      this.dialogFormVisible=false;
    },
    cancel2(){
      this.dialogCardVisible=false;
    },
    isFormEmpty() {
      return Object.values(this.formData).some(value => value === null||" ");
    },
    submitForm(){
      console.log(123)
      if(this.isFormEmpty() == true){
        alert("请输入有效内容！")
      }
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    }
  }
}
</script>
<style scoped lang="css" src="../assets/EquipmentOperation/index.css" />